<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>编辑运营商</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="__CSS__/oksub.css">
    <script type="text/javascript" src="__LIB__/loading/okLoading.js"></script>
</head>
<body>
<div class="ok-body">
    <!--form表单-->
    <form class="layui-form ok-form ibms-dialog-form" lay-filter="filter">
        <div class="layui-form-item">
            <label class="layui-form-label">运营商名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">背景颜色</label>
            <div class="layui-input-inline" style="width: 120px;">
                <input type="text" name="bgcolor" id="color-input" lay-verify="required" placeholder="请选择颜色" class="layui-input">
            </div>
            <div class="layui-inline ibms-btn-colorpicker">
                <div id="color-picker"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="checkbox" name="status" lay-skin="switch" lay-text="启用|停用" value="1" checked>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea name="remarks" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="edit">立即提交</button>
                <a class="layui-btn layui-btn-primary cancle-btn">取消</a>
            </div>
        </div>
    </form>
</div>
<!--js逻辑-->
<script src="__LIB__/layui/layui.js"></script>
<script>
    layui.use(["colorpicker", "element", "form", "jquery", "okLayer", "okUtils"], function () {
        let colorpicker = layui.colorpicker;
        let form = layui.form;
        let $ = layui.jquery;
        let okLayer = layui.okLayer;
        let okUtils = layui.okUtils;
        okLoading.close();

        // 表单赋值：parent.rowData为父页面传过来的行数据
        let initData = JSON.parse(JSON.stringify(parent.rowData));
        form.val("filter", initData);

        colorpicker.render({
            elem: '#color-picker',
            color: initData.bgcolor,
            done: function (color) {
                $('#color-input').val(color);
            }
        });

        form.on("submit(edit)", function (data) {
            data.field.id = initData.id;
            okUtils.ajax("{:url('edit')}", "post", data.field, true).done(function (response) {
                okLayer.greenTickMsg(response.msg, function () {
                    parent.layer.close(parent.layer.getFrameIndex(window.name));
                });
            }).fail(function (error) {
                // console.log(error)
            });
            return false;
        });

        $(".cancle-btn").click(function () {
            parent.layer.close(parent.layer.getFrameIndex(window.name));
        });
    });
</script>
</body>
</html>
